<template>
  <div class="star" :class="'star-'+star">
    <span class="star-item"  v-for="(item,index) in starArr" :class="item" :key="index"></span>
  </div>
</template>

<script>
export default {
  name: "Star",
  components: {},
  props:{
      star:Number,
      score:Number
  },
  computed: {
      starArr(){
          console.log(this.score);
          let arr=[]
            const {score} =this
            const scoreInt = Math.floor(score)
            console.log(scoreInt);
            for(let i=0;i<scoreInt;i++){
                arr.push('on')
            }
            if(score*10-scoreInt*10>=5){
                arr.push('half')
            }
            if(arr.length<5){
                arr.push('off')
            }
          return arr
      }
  }
};
</script>

<style lang='stylus' rel='stylesheet/stylus'>
@import '../../common/stylus/mixins.styl'
.star //2x图 3x图
                            float left
                            font-size 0
                            .star-item
                              display inline-block
                              background-repeat no-repeat
                            &.star-48
                              .star-item
                                width 20px
                                height 20px
                                margin-right 22px
                                background-size 20px 20px
                                &:last-child
                                  margin-right: 0
                                &.on
                                  bg-image('./images/stars/star48_on')
                                &.half
                                  bg-image('./images/stars/star48_half')
                                &.off
                                  bg-image('./images/stars/star48_off')
                            &.star-36
                              .star-item
                                width 15px
                                height 15px
                                margin-right 6px
                                background-size 15px 15px
                                &:last-child
                                  margin-right 0
                                &.on
                                  bg-image('./images/stars/star36_on')
                                &.half
                                  bg-image('./images/stars/star36_half')
                                &.off
                                  bg-image('./images/stars/star36_off')
                            &.star-24
                              .star-item
                                width 10px
                                height 10px
                                margin-right 3px
                                background-size 10px 10px
                                &:last-child
                                  margin-right 0
                                &.on
                                  bg-image('./images/stars/star24_on')
                                &.half
                                  bg-image('./images/stars/star24_half')
                                &.off
                                  bg-image('./images/stars/star24_off')</style>